<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TextEditor</title>
    <script src="/web-container-base/plugins/scripts/jquery.min.js"></script>
    <link href="/web-container-base/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/web-container-base/plugins/bootstrapQ/qiao.css" rel="stylesheet">
    <script type="text/javascript" src="/web-container-base/plugins/bootstrapQ/qiao.js"></script>
    <link href="/web-container-base/plugins/markdown/css/editormd.min.css" rel="stylesheet">
    <script type="text/javascript" src="/web-container-base/js/common.js"></script>
    <script type="text/javascript" src="/web-container-base/js/base64.js"></script>
    <script type="text/javascript" src="/web-container-base/js/DocSys.js"></script>
    <script type="text/javascript" src="/web-container-base/js/aceEditor.js"></script>
    <script src="/web-container-base/plugins/ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
    
    <style type="text/css" media="screen">
	  body {
	      overflow: hidden;
	  }
	
	  #editor {
	      margin: 40px 0 0 0;
	      position: absolute;
	      top: 0;
	      bottom: 0;
	      left: 0;
	      right: 0;
	  }
	</style>
</head>
<body style="height: 100%; margin: 0;">
    <div>
		<div id="textEditor">
			<div id="textEditorToolBar" style="height:40px;">
				<div class="editormd-toolbar" style="display: block;">
					<div class="editormd-toolbar-container">
						<ul id="toolBarMenu" class="editormd-menu" style="display:none;">
							<li><a href="javascript:;" onclick="saveDoc();" title="保存（Ctrl+S）" unselectable="on"><i class="fa fa-save" name="save" unselectable="on"></i></a></li>
							<li class="divider" unselectable="on">|</li>
							<li><a href="javascript:;" title="撤销（Ctrl+Z）" unselectable="on"><i class="fa fa-undo" name="undo" unselectable="on"></i></a></li>
							<li><a href="javascript:;" title="反撤销（Ctrl+Y）" unselectable="on"><i class="fa fa-repeat" name="redo" unselectable="on"></i></a></li>
							<li class="divider" unselectable="on">|</li>
						</ul>
						<ul id="switchEditMode" class="editormd-menu" style="position:absolute; right:5px;">
							<li id="textEditorCloseBtn" style="display:none;">
								<a href="javascript:;" onclick="exitEdit()" title="退出编辑" unselectable="on">
									<i class="fa fa-close" name="exitEdit" unselectable="on"></i>
								</a>
							</li>
							<li id="textEditorEditBtn" style="display:none;">
								<a href="javascript:;" onclick="enableEdit()" title="编辑" unselectable="on">
									<i class="fa fa-edit" name="edit" unselectable="on"></i>
								</a>
							</li>
						</ul>				
					</div>
				</div>
			</div>
			<div class="textEditorContent" style="min-height: 600px;">
				<pre id="editor">
				</pre>
			</div>
		</div>
    </div>   
	<script type="text/javascript">
	    var docInfo = getDocInfoFromRequestParamStr();
	    document.title = docInfo.name;
	    
	    if(!docInfo.fileSuffix)
	    {
	    	docInfo.fileSuffix = getFileSuffix(docInfo.name);
	    }
	    
		var docText = "";
		var tmpSavedDocText = "";
		var isContentChanged = false;
		
		var editor = ace.edit("editor");
		editor.setTheme("ace/theme/twilight");
		//editor.setTheme("ace/theme/chrome");
		//editor.setTheme("ace/theme/tomorrow_night");
		editor.session.setMode("ace/mode/text");
		editor.setReadOnly(true); // false to make it editable
	
		getDocText(docInfo, showText, showErrorMessage);
	  			
		function showText(docText, tmpSavedDocText)
		{
			
			checkAndSetFileShowMode(docInfo);
			checkAndSetEditBtn(docInfo);	
			
			editor.setValue(docText);
			editor.getSession().on('change', function(e) {
				isContentChanged = true;
			});
		}
		    
	    function saveDoc()
		{
	    	console.log("saveDoc docInfo.docId:" + docInfo.docId);
			
	    	if(isContentChanged == false)
	    	{
	    	   	console.log("saveDoc there is no change");
	    		return;
	    	}
	    	
			var content = editor.getValue();
			$.ajax({
	            url : "/doc/autoSave",
	            type : "post",
	            dataType : "json",
	            data : {
	                reposId: docInfo.vid,
	            	docId : docInfo.docId,
	            	path: docInfo.path,
	                name: docInfo.name,
	            	content : content,
	            	docType: 1, //RealDoc
	                shareId: docInfo.shareId,
	            },
	            success : function (ret) {
	                if(ret.status ){
	                    console.log("保存成功 : " , (new Date()).toLocaleDateString());
	                    docText = content;
	                    isContentChanged = false;
	
	                    bootstrapQ.msg({
									msg : "保存成功 :" + (new Date()).toLocaleDateString(),
									type : 'success',
									time : 1000,
						});
					}else {
	                    bootstrapQ.alert("保存失败:"+ret.msgInfo);
	                }
	            },
	            error : function () {
	                bootstrapQ.alert("保存失败:服务器异常");
	            }
	        });
	    }
	
	    function enableEdit()
	    {
			console.log("enableEdit()");
			if(!docInfo.docId || docInfo.docId == 0)
			{
				showErrorMessage("请选择文件!");
				return;
			}

			$("[dataId='"+ docInfo.docId +"']").children("div:first-child").css("color","red");
	    }
	    
		//退出文件编辑状态
	    function exitEdit() {   	
			console.log("exitEdit()  docInfo.docId:" + docInfo.docId);
			if(!docInfo.docId || docInfo.docId == 0)
			{
				showErrorMessage("文件不存在");
				switchEditMode(false);
				return;
			}

			$("[dataId='"+ docInfo.docId +"']").children("div:first-child").css("color","black");
			switchEditMode(false);
		}
	
		function switchEditMode(edit)
		{
			if(edit == true)
			{
				//显示工具条
				$("#toolBarMenu").show();
				
				//显示退出编辑按键
				$("#textEditorCloseBtn").show();
				
				//隐藏编辑按键
				$("#textEditorEditBtn").hide();
	
				//Enable Edit
				editor.setReadOnly(false);
			}
			else
			{
				//隐藏工具条
				$("#toolBarMenu").hide();
				
				//隐藏退出编辑按键
				$("#textEditorCloseBtn").hide();
			
				//显示编辑按键
				$("#textEditorEditBtn").show();			
				
				//Disable Edit
				editor.setReadOnly(true);
			}
		}
		
		function checkAndSetEditBtn(docInfo)
		{
			if(docInfo.isZip && docInfo.isZip == 1)
			{
				return;
			}
			if(docInfo.isHistory && docInfo.isHistory == 1)
			{
				return;
			}
			
			if(docInfo.fileSuffix)
			{
				switch(docInfo.fileSuffix)
				{
				case "md":
		    	case "cpp":
		    	case "hpp":
		    	case "c":
		    	case "h":
		    	case "java":
		    	case "py":
		    	case "go":
		    	case "js":
		    	case "css":
		    	case "html":
		    	case "json":
		    	case "sql":
		    	case "xml":
		    	case "php":
		    	case "sh":
		    	case "txt":
		    	case "yaml":
		    	case "yml":
		    		$("#textEditorEditBtn").show();
		    		break;
				}
			}
		}
		
		function checkAndSetFileShowMode(docInfo)
		{
			var showMode = getFileShowMode(docInfo.name, docInfo.fileSuffix);
			console.log("checkAndSetFileShowMode() showMode:" + showMode);
			editor.session.setMode("ace/mode/" + showMode);
		}
    </script>
</body>
</html>